$(function () {
    //酷玩最新
    var kuwanimg = document.getElementsByClassName('kuwanimg')[0]
    $.ajax({
        url: 'http://localhost:3000/report/hot',

        type: 'get',
        success: function (data) {
            console.log(data);
            var str = ''
            for (var i in data) {
                str += '<div class="reportimgmax">' + '<img src=" ' + data[i].img + '" >' + '<p>' + data[i].text + '</p> ' + '<div class="ping">' + '<p>' + data[i].uName + '</p>' + '<p><img src="../img/zan.png" >3 <img src="../img/xin.png" >3' + '</p > ' + ' </div > ' + '</div > '
                kuwanimg.innerHTML = str
            }
        }
    })
    //最热
    var hottest = $('.hottest')
    var hottest = document.getElementsByClassName('hottest')[0]
    $.ajax({
        url: 'http://localhost:3000/report/new',
        type: 'get',
        success: function (data) {
            console.log(data);
            var str = ''
            for (var i in data) {
                str += '<div class="hottestimg">' + '<img src=" ' + data[i].img + '" >' + '<p>' + data[i].text + '</p> ' + '<div class="money">' + '<p>' + data[i].uName + '</p>' + '<p><img src="../img/zan.png" >3 <img src="../img/xin.png" >3' + '</p > ' + ' </div > ' + '</div > '
                hottest.innerHTML = str
            }
        }
    })
    var kucontl1 = $('.kucontl1')
    var kucontl2 = $('.kucontl2')
    var kucontl3 = $('.kucontl3')
    var hottestmax = document.getElementsByClassName('hottestmax')[0]
    var categorymax = document.getElementsByClassName('categorymax')[0]
    var newmax = document.getElementsByClassName('newmax')[0]
    kucontl1.click(function () {
        categorymax.style.display = 'none'
        hottestmax.style.display = 'none'
        newmax.style.display = 'block'
        $(this).css({
            'color': '#F7562C',
            'border-bottom': '2px solid #F7562C'
        })
        kucontl2.css({
            'color': 'black',
            'border-bottom': 'none'
        })
        kucontl3.css({
            'color': 'black',
            'border-bottom': 'none'
        })
    })
    kucontl2.click(function () {
        hottestmax.style.display = 'block'
        newmax.style.display = 'none'
        categorymax.style.display = 'none'
        $(this).css({
            'color': '#F7562C',
            'border-bottom': '2px solid #F7562C'
        })
        kucontl1.css({
            'color': 'black',
            'border-bottom': 'none'
        })
        kucontl3.css({
            'color': 'black',
            'border-bottom': 'none'
        })
    })
    kucontl3.click(function () {
        hottestmax.style.display = 'none'
        categorymax.style.display = 'block'
        newmax.style.display = 'none'
        $(this).css({
            'color': '#F7562C',
            'border-bottom': '2px solid #F7562C'
        })
        kucontl1.css({
            'color': 'black',
            'border-bottom': 'none'
        })
        kucontl2.css({
            'color': 'black',
            'border-bottom': 'none'
        })
    })
    //品类的ajax
    var arr = []
    var title1 = $('.title')
    var title2 = document.querySelectorAll('.title2')
    $.ajax({
        url: 'http://localhost:3000/play/category',
        type: 'get',
        success: function (data) {

            console.log(arr);
            console.log(data);
            for (var i = 0; i < title1.length; i++) {
                // console.log(title1[i]);

            }
            for (var i = 0; i < title2.length; i++) {
                console.log(title2[i]);

            }
            console.log();
            for (var i in data) {
                console.log(data[i].title);
                title1[i].innerHTML = data[i].title
                console.log(data[i]);
                var data2 = data[i].list
                var str = ''
                for (var j in data2) {
                    /*  <ul></ul>
                         <li></li><span></span>
                     </ul > */
                    // str += '<span>' + data2[j].productName + '</span>' + '  <span>' + data2[j].nums + '</span>'
                    str += '<ul>' + '<li>' + data2[j].productName + '</li><span>(' + data2[j].nums + ')</span></ul>'
                    // console.log(data2[j].productName);
                    title2[i].innerHTML = str
                    // console.log(title2.innerHTML = str);
                }
            }



        }
    })
    kucontl3.click(function () {
        $(this).css({
            'color': '#F7562C',
            'border-bottom': '2px solid #F7562C'
        })
        kucontl2.css({
            'color': 'black',
            'border-bottom': 'none'
        })
        kucontl1.css({
            'color': 'black',
            'border-bottom': 'none'
        })
    })
})